import axios from "../../request/axios";
import { useEffect, useState } from "react";
import { Button, ConfigProvider, theme } from "antd";
import { useNavigate } from "react-router-dom";
import "./List.css";
function List() {
  const navigate = useNavigate();
  const [ys, setYs] = useState(false);
  const [lb, setLb] = useState([]);
  const tu = [
    {
      img: "https://gips1.baidu.com/it/u=3874647369,3220417986&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280",
    },
  ];
  useEffect(() => {
    axios.get("http://blogapi.shbwyz.com/article/list").then((res) => {
      // console.log(res);
      setLb(res.data.rows);
    });
  }, []);
  const qh = () => {
    setYs(!ys);
  };
  // 跳转详情页带上ID
  const tz = (id: number) => {
    navigate("/Xiang/" + id);
  };
  return (
    <ConfigProvider
      theme={{
        // 1. 单独使用暗色算法
        algorithm: ys ? theme.darkAlgorithm : theme.compactAlgorithm,

        // 2. 组合使用暗色算法与紧凑算法
        // algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
      }}
    >
      <div>
        <Button onClick={qh}>切换</Button>
        {lb.map((item: any) => {
          return (
            <>
              <div className="list-container" onClick={() => tz(item.id)}>
                <div className="list-left">
                  <h2>{item.title}</h2>
                  <p>{item.content}</p>
                </div>
                <div className="list-right">
                  <img
                    className="list-img"
                    src="https://gips1.baidu.com/it/u=3874647369,3220417986&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280"
                    alt=""
                  />
                </div>
              </div>
            </>
          );
        })}
      </div>
    </ConfigProvider>
  );
}

export default List;
